<template>
    <div class="query-grade-container">
        <n-card
              title="成绩查询"
              hoverable
        >
            <div class="card-content">
                <div class="query-container">
                    <n-space>
                        <n-input
                              clearable
                              v-model:value="keyword"
                              placeholder="输入课程名称..."
                        />
                        <n-button
                              type="primary"
                              @click="searchGrade"
                        >
                            搜索
                        </n-button>
                    </n-space>
                </div>
                <div class="table-container">
                    <n-data-table
                          :columns="columns"
                          :data="gradeList"
                          :pagination="pagination"
                          :row-key="row => row.gradeName"
                    />
                </div>
                <div class="button-container">
                    <n-button
                          type="primary"
                          @click="download"
                    >
                        下载成绩
                    </n-button>
                    <n-button
                          v-show="linkShow"
                          text
                          id="link"
                          tag="a"
                          type="primary"
                          :href="linkHref"
                    >
                        点击下载证书
                    </n-button>
                </div>
            </div>
        </n-card>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useMessage } from 'naive-ui'
import api from '../api'

export default defineComponent({
    name: 'QueryGrade',
    
    beforeRouteEnter(to, from, next) {
        next((vm) => vm.getGradeList())
    },
    
    setup() {
        window.$message = useMessage()
        return {
            columns: [
                {
                    title: '课程名称',
                    key: 'gradeName',
                    align: 'center'
                },
                {
                    title: '成绩',
                    key: 'gradePoint',
                    align: 'center'
                }
            ]
        }
    },
    data() {
        return {
            keyword: '',
            pagination: {
                pageSize: 10
            },
            gradeList: [],
            linkShow: false,
            linkHref: ''
        }
    },
    methods: {
        async getGradeList() {
            const studentNumber = this.$store.state.username
            const resp = await api.grade.getGrades(studentNumber, this.$store.state.schoolName,'')
            console.log(resp)
            this.gradeList = resp.data
        },
        async searchGrade() {
            const studentNumber = this.$store.state.username
            const resp = await api.grade.getGrades(studentNumber, this.$store.state.schoolName, this.keyword)
            console.log(resp)
            this.gradeList = resp.data
        },
        download() {
            this.linkShow = true
            this.linkHref = 'http://127.0.0.1:5001/api/student/downloadGrade?studentNumber=' + this.$store.state.username + '&schoolName=' + this.$store.state.schoolName
        }
    }
})
</script>

<style scoped lang="less">
.query-grade-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10%;
    .n-card {
        width: 80%;
        height: 80%;
        
        .query-container {
            margin-bottom: 3%;
        }
        .button-container {
            display: flex;
            justify-content: center;
        }
    }
}
</style>